﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#MainContent_Button1").click(function () {
                $("#empDetails").hide("slow");

                var empId = $("#MainContent_TextBox1").val();
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    url: "WebService.asmx/GetEmpById",
                    data: "{'id' : '" + empId + "'}",
                    success: function (data) {
                        $("#textId").html(data.d.ID);
                        $("#textName").html(data.d.Name);

                        $("#empDetails").fadeIn("slow");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });
        });
    </script>

<div>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <input type="button" ID="Button1" runat="server" value="Button" />
    <asp:ImageButton ID="ImageButton1" runat="server" BackColor="Yellow" 
        BorderStyle="Solid" ImageUrl="~/PictureControl.png" Width="74px" />

</div >
    <div id="empDetails">
    <b>ID:</b>&nbsp;<span id="textId"></span><br />
    <b>Name:</b>&nbsp;<span id="textName"></span><br />
    </div>

</asp:Content>
